<template>
  <div class="user-edit">
    <!-- Drawer抽屉 -->
    <Drawer :title="title" v-model="visible" width="1400" :mask-closable="true">
      <Scroll :height="height">
        <Card style="width:96%;margin-left: 2%">
          <p slot="title">
            <b>{{typicalDesign.typical_name}}</b>&nbsp;&nbsp; [ {{typicalDesign.pole_type}} ]
          </p>
          <Row :gutter="16">
            <Col span="12">
              <p class="listTitle">示&nbsp;例&nbsp;图</p>
              <p>
                <img :src="baseUrl + '\/public\/uploads\/' + typicalDesign.typical_figure_path" alt="" width="90%"
                      style="border: 1px solid #ff9900">
              </p>
              <p style="text-align: center;">{{typicalDesign.figure_number}}</p><br>
              <p style="font-size: 14px" :v-show="typicalDesign.apply_scope">适用范围：{{typicalDesign.apply_scope}}</p>
            </Col>
            <Col span="12">
              <p class="listTitle">设&nbsp;备&nbsp;材&nbsp;料&nbsp;表</p>
              <table width="98%" class="gridtable">
                <tr>
                  <th>序号</th>
                  <th>材料编码</th>
                  <th>材料名称</th>
                  <th>材料规格</th>
                  <th>单位</th>
                  <th>数量</th>
                </tr>
                <tr v-for="(item,index) in typicalMaterial" :key="index">
                  <td style="text-align: center">{{index + 1}}<i style="display: none">{{item.id}}</i></td>
                  <td style="text-align: center">{{item.code}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.stype}}</td>
                  <td style="text-align: center">{{item.unit}}</td>
                  <td style="text-align: center">{{item.count}}</td>
                </tr>
              </table>
              <br>
              <p style="font-size: 14px;">说明：{{typicalDesign.description}}</p>
            </Col>
          </Row>
        </Card>
      </Scroll>
      <div class="demo-drawer-footer">
        <Button type="primary" @click="exportDesign" style="margin-right: 30px" v-if="this.typicalDesign.sys_or_local < 2">另存为我的典设</Button>
        <Button type="primary" @click="submit">确定</Button>
      </div>
    </Drawer>
    <Modal title="导出到我的典型设计" v-model="exportModelVisible" :mask-closable='false' :width="500" :styles="{top: '200px'}">
      <Form ref="importModelForm" :model="importModelForm" :label-width="130">
        <Divider orientation="left" style="font-size: 14px; color: red">导出到</Divider>
        <FormItem label="我的典型设计分类" prop="typical_design_id" class="margin-bottom-3">
          <Select v-model="importModelForm.sys_typical_classification_id">
            <Option v-for="(item) in sysTypicalClassList" :value="item.id" :key="item.id">
              {{item.classification_name}}
            </Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelModel">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submitImportModel">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { base_url } from '@/libs/axios';
import { insertSysTypicalDesignFromTypical, insertSysTypicalMaterialFromTypical,
         insertSysTypicalDesignFromSelf, insertSysTypicalMaterialFromSelf, getMyTypicalClass } from '@/api/typical'
export default {
  name: "viewTypical",
  components: {
    
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    typicalDesign: Object,
    typicalMaterial: Array,
    type: {
      /**
       * '1': 编辑用户
       * '2': 添加用户
       * '0': 用户详情
       */
      type: String,
      default: "0"
    }
  },
  data() {
    return {
      visible: this.value,
      title: "查看典型设计详情",
      baseUrl: base_url,
      height: 540,
      exportModelVisible: false,
      submitLoading: false,
      sysTypicalClassList: [],
      importModelForm: {
        typical_design_id: 0,
        sys_typical_classification_id: 0,
        sys_or_local: 2
      }
    };
  },
  methods: {
    getSysTypicalClassification() {
      getMyTypicalClass().then(res => {
        if (res.code === 0) {
          this.sysTypicalClassList = res.data;
          this.typicalClassList = res.data;
        }
      })
    },
    cancelModel() {
      this.exportModelVisible = false;
    },
    submitImportModel() {
      this.importModelForm.typical_design_id = this.typicalDesign.id;
      if (this.typicalDesign.sys_or_local == 0) {
        if (this.importModelForm.typical_design_id > 0) {
          insertSysTypicalDesignFromTypical(this.importModelForm).then(res => {
            if (res.code === 0) {
              const sys_typical_design_id = res.data;
              const typical_design_id = this.importModelForm.typical_design_id;
              insertSysTypicalMaterialFromTypical({sys_typical_design_id, typical_design_id}).then(res => {
                if (res.code === 0) {
                  this.$Message.success(res.message);
                  this.exportModelVisible = false;
                }
              })
            } 
          })
        }
      } else if (this.typicalDesign.sys_or_local == 1) {
        if (this.importModelForm.typical_design_id > 0) {
          insertSysTypicalDesignFromSelf(this.importModelForm).then(res => {
            if (res.code === 0) {
              const sys_typical_design_id = res.data;
              const typical_design_id = this.importModelForm.typical_design_id;
              insertSysTypicalMaterialFromSelf({sys_typical_design_id, typical_design_id}).then(res => {
                if (res.code === 0) {
                  this.$Message.success(res.message);
                  this.exportModelVisible = false;
                }
              })
            }
          })
        }
      }
    },
    init() {
      
    },
    
    submit() {
      this.visible = false;
    },
    setCurrentValue(value) {
      this.visible = value;
    },
    exportDesign() {
      this.exportModelVisible = true;
      this.getSysTypicalClassification();
      this.importModelForm.typical_design_id = this.typicalDesign.id;
      this.importModelForm.sys_typical_classification_id = 0;
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    }
  },
  mounted() {
    this.height = Number(document.documentElement.clientHeight - 100);
    this.init();
  }
};
</script>

<style lang="less">
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.listTitle {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
table.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  color: #777777;
  border-width: 1px;
  border-color: #777777;
  border-collapse: collapse;
}

table.gridtable th {
  border-width: 1px;
  padding: 6px;
  border-style: solid;
  border-color: #aaaaaa;
  background-color: #dedede;
}

table.gridtable td {
  border-width: 1px;
  padding: 4px;
  border-style: solid;
  border-color: #8b8b8b;
  background-color: #ffffff;
}
</style>

